<template>
	<view>
		<view class="top">
			<view class="big">

				<view class="left">
					<view class="mask">
						<image src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/gallery/4.png"
							class="lock" mode="">
						</image>
					</view>
					<image class="curImg"
						src="https://tb.wuyouzhuan888.com/assess/592aa1713d5fbd9a4b7857aae3a982e5.png">
					</image>
				</view>

				<view class="info">
					<view class="name">
						水晶头像系列
					</view>
					<view class="more" @click="back">
						查看专辑<u-icon color="#16AC51" name="arrow-right"></u-icon>
					</view>
				</view>


			</view>
			<view class="right">
			
				<button class="share" open-type="share" style="border-radius: 70rpx;">
					<view class="btn_box">
						<image class="icons"
							src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/gallery/5.png">
							<view class="text">分享好友</view>
						</image>
					</view>
				</button>
				<view class="dowload" @click="clickDownload({types:'imgs'})">
					<image class="icons1"
						src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/gallery/6.png"></image>
					<view class="text">立即下载</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="title">
				<image class="line1" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/2.png" mode="">
				</image>
				<text>更多推荐</text>
				<image class="line1" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/2.png" mode="">
				</image>
			</view>
			
			<view class="photo">
				<view class="item" v-for="(item,index) in 5">
					<view class="img" @click="clickImg(index)">
						
						<image class="down" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/download.png" mode=""></image>
						<u-image :lazy-load="true" border-radius="20rpx" width="210rpx" height="210rpx" :src="item.url"
							:fade="true" duration="450">
							<u-loading style="border-radius: 20rpx;" slot="loading"></u-loading>
							<view slot="error" style="font-size: 24rpx; background-color: none">
								<!-- 加载失败 -->
									<image class="img" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/gallery/empty.png" mode=""></image>
							</view>
						</u-image>
					</view>
				
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

			clickDownload() {},
			clickImg(){},
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.list{
		padding: 0 24rpx;
		.photo {
			display: flex;
			flex-wrap: wrap;
		
			.img {
				width: 210rpx;
				height: 210rpx;
				border-radius: 20rpx;
				position: relative;
				.down{
					background: rgba(131, 166, 255, 0.25);
					position: absolute;
					bottom: 0;
					right: 0;
					width: 127rpx;
					height: 57rpx;
				z-index: 2;
				}
			}
		
			.item {
				margin-right: 36rpx;
				margin-bottom: 35rpx;
				
		
				&:nth-child(3n) {
					margin-right: 0;
				}
			}
		}
		.title{
			padding: 50rpx 0  42rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFang HK, PingFang HK;
			font-weight: 300;
			color: #FFFFFF;
			line-height: 38rpx;
			.line1{
				width: 30rpx;
				height: 25rpx;
			}
			text{
				padding: 0 17rpx;
			}
		}
	}
	.top {
		
		padding: 24rpx 24rpx 0;

		.big {
			padding: 0 9rpx;
			display: flex;

			.handleBtn {
				width: 72rpx;
				height: 72rpx;
			}

			.info {
				margin-left: 39rpx;

				.name {
					font-size: 34rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 40rpx;
					padding-top: 28rpx;
				}

				.more {
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #16AC51;
					line-height: 30rpx;
					margin-top: 34rpx;
				}
			}
		}

		.left {
			width: 389rpx;
			height: 389rpx;
			position: relative;
			border-radius: 20rpx;
			overflow: hidden;

			.mask {
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				left: 0;
				background: rgba(0, 0, 0, 0.5);
				z-index: 9;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.lock {
					width: 134rpx;
					height: 134rpx;
				}
			}
		}

		.right {
			padding: 40rpx 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.icons {
				margin-right: 10rpx;
				width: 42rpx;
				height: 42rpx;
			}

			.icons1 {
				margin-right: 10rpx;
				width: 30rpx;
				height: 28rpx;
			}


			.text {
				font-size: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 40rpx;
			}

			.dowload1 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 298rpx;
				height: 80rpx;
				background-color: #455FE8;
				border-radius: 70rpx;
			}

			.dowload {
				justify-content: center;
				display: flex;
				align-items: center;
				width: 298rpx;
				height: 80rpx;
				border-radius: 40rpx;
				background-color: #8CC950;
				border-radius: 70rpx;
			}

			.share {
				padding: 0;
				margin: 0;
				justify-content: center;
				position: relative;
				display: flex;
				align-items: center;
				width: 298rpx;
				height: 80rpx;
				background-color: #8340F1;
				border-radius: 70rpx;

				.btn_box {
					position: absolute;
					left: 0;
					top: 0;
					bottom: 0;
					right: 0;
					display: flex;
					align-items: center;
					justify-content: center;


				}
			}
		}
	}
</style>
